<template>
  <div>
    <!-- 头部 -->
    <div class="top">
      <span>类型</span>
      <el-radio-group v-model="formInline.type" @change="getData">
        <el-radio-button label="scene">场景联动</el-radio-button>
        <el-radio-button label="flow">数据流转</el-radio-button>
      </el-radio-group>
      <el-button type="primary" class="addBtn"
        ><i class="el-icon-plus"></i>添加</el-button
      >
    </div>

    <!-- 表格 -->
    <div class="table1">
      <el-table
        :data="tableData"
        style="width: 100%"
        :default-sort="{ prop: 'date', order: 'descending' }"
        border
      >
        <el-table-column prop="date" label="规则名称" sortable width="180">
        </el-table-column>
        <el-table-column prop="name" label="创建时间" sortable width="180">
        </el-table-column>
        <el-table-column
          label="状态"
          :formatter="stateFormat"
        ></el-table-column>
        <el-table-column prop="address" label="执行日志">
          <el-button plain>查看</el-button>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              plain
              :disabled="scope.row.state == 'stopped'"
              @click="handleShowLog(scope.row)"
              >编辑</el-button
            >
            <el-button type="success" plain v-if="scope.row.state == 'running'"
              >启动</el-button
            >
            <el-button type="danger" v-if="scope.row.state == 'stopped'"
              >停止</el-button
            >
            <el-button
              type="danger"
              plain
              :disabled="scope.row.state == 'stopped'"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <Pagination :data="formInline" @onPagePaging="getData"></Pagination>
    </div>

    <!-- 编辑界面 -->
    <el-dialog
      :title="title"
      :visible.sync="editFormVisible"
      width="80%"
      @click="closeDialog"
    >
      <el-form
        label-width="120px"
        :rules="rules"
        :model="editForm"
        ref="editForm"
      >
        <el-form-item label="规则名称" prop="name">
          <el-input
            size="small"
            v-model="editForm.name"
            auto-complete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="规则类型" prop="type">
          <el-select v-model="editForm.type">
            <el-option label="场景联动" value="scene"></el-option>
            <el-option label="数据流转" value="flow"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="监听器" prop="listeners">
          <el-card
            class="box-card"
            v-for="listener in editForm.listeners"
            :key="listener.id"
            :body-style="{ padding: '10px' }"
          >
            <el-row>
              <el-col :span="22"><Listener :data="listener"></Listener></el-col>
              <el-col :span="2"
                ><el-button
                  size="small"
                  type="error"
                  @click="delListener(listener)"
                  >删除</el-button
                ></el-col
              >
            </el-row>
          </el-card>
          <el-button size="small" @click="addListener()">新增</el-button>
        </el-form-item>
        <el-form-item label="过滤器" prop="filters">
          <el-card
            class="box-card"
            v-for="filter in editForm.filters"
            :key="filter.id"
            :body-style="{ padding: '10px' }"
          >
            <el-row>
              <el-col :span="22"><Filtera :data="filter"></Filtera></el-col>
              <el-col :span="2"
                ><el-button size="small" type="error" @click="delFilter(filter)"
                  >删除</el-button
                ></el-col
              >
            </el-row>
          </el-card>
          <el-button size="small" @click="addFilter()">新增</el-button>
        </el-form-item>
        <el-form-item label="输出" prop="actions">
          <el-card
            class="box-card"
            v-for="action in editForm.actions"
            :key="action.id"
            :body-style="{ padding: '10px' }"
          >
            <!-- <el-row>
              <el-col :span="22"
                ><Action
                  :data="action"
                  actions="device,http,mqtt,kafka,tcp"
                ></Action
              ></el-col>
              <el-col :span="2"
                ><el-button size="small" type="error" @click="delAction(action)"
                  >删除</el-button
                ></el-col
              >
            </el-row> -->
          </el-card>
          <el-button size="small" @click="addAction()">新增</el-button>
        </el-form-item>
        <el-form-item label="场景描述" prop="desc">
          <el-input
            size="small"
            v-model="editForm.desc"
            auto-complete="off"
            type="textarea"
            :rows="2"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog">取消</el-button>
        <el-button
          :disabled="editForm.state == 'running'"
          size="small"
          type="primary"
          :loading="$store.state.loading"
          class="title"
          @click="submitEditForm('editForm')"
          >保存</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Listener from './Listener.vue'
import Pagination from './common/Pagination'
// import Action from './Action.vue'
export default {
  data () {
    return {
      // 表格数据
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          state: 'running'
        },
        {
          date: '2016-05-04',
          name: '王虎',
          state: 'running'
        },
        {
          date: '2016-05-01',
          name: '123',
          state: 'stopped'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          state: 'stopped'
        }
      ],
      // 分页参数
      formInline: {
        type: 'scene',
        page: 1,
        size: 10,
        total: 20
      },
      // 修改弹窗是否显示
      editFormVisible: false,
      editForm: {
        name: '',
        type: 'scene',
        state: '',
        listeners: [],
        filters: [],
        actions: [],
        desc: ''
      },
      rules: {
        name: [{ required: true, message: '请输入规则名称', trigger: 'blur' }]
        // actions: [{ validator: validateAction, trigger: 'blur' }]
      }
    }
  },
  components: {
    Listener,
    Pagination
    // Action
  },
  methods: {
    // 处理表格状态列中的数据
    stateFormat (row, column) {
      switch (row.state) {
        case 'stopped':
          return '运行中'

        case 'running':
          return '已停止'
      }
    },
    // 获取表格中的数据
    getData () {
      console.log(this.formInline)
    },
    /** 选择页码的回调函数 */
    handlePage (val) {
      this.formInline.page = Number(val)
      this.getData()
    },
    // 关闭弹窗
    closeDialog () {
      this.editFormVisible = false
    },
    // 展示编辑弹窗
    handleShowLog (row) {
      console.log('编辑')
      this.ruleId = row.id
      this.showLogVisible = true
      this.editFormVisible = true
    },
    // 删除过滤
    delListener (listener) {
      const idx = this.editForm.listeners.findIndex(
        (l) => l.id === listener.id
      )
      this.editForm.listeners.splice(idx, 1)
    },
    addListener () {
      this.editForm.listeners.push({
        // id: uuid(),
        type: 'device',
        topic: '',
        conditions: []
      })
    },
    addFilter () {
      this.editForm.filters.push({
        // id: uuid(),
        type: 'device',
        conditions: []
      })
    },
    delFilter (filter) {
      const idx = this.editForm.filters.findIndex((o) => o.id === filter.id)
      this.editForm.filters.splice(idx, 1)
    },
    addAction () {
      this.editForm.actions.push({
        // id: uuid(),
        type: '',
        services: []
      })
    },
    delAction (action) {
      const idx = this.editForm.actions.findIndex((o) => o.id === action.id)
      this.editForm.actions.splice(idx, 1)
    },
    submitEditForm (from) {
      this.$refs[from].validate((valid) => {
        if (valid) {
          this.editForm.listeners.forEach((l) => {
            l.config = JSON.stringify(l)
          })
          this.editForm.filters.forEach((f) => {
            f.config = JSON.stringify(f)
          })
          this.editForm.actions.forEach((a) => {
            a.config = JSON.stringify(a)
          })

          // RuleSave(this.editForm).then(() => {
          //   this.editFormVisible = false
          //   this.$message({
          //     type: 'success',
          //     message: '保存成功！'
          //   })
          //   this.getdata()
          //   this.editFormVisible = false
          // })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.top {
  margin-bottom: 20px;
  span {
    margin-right: 20px;
  }
  .addBtn {
    margin-left: 20px;
  }
}
</style>
